<template>
  <div id="app" @click="clicked">
    <!-- <keep-alive> -->
    <router-view />
    <a-layout class="index" v-if="$route.path !== '/'">
      <a-layout-header style="background-color: transparent;">
        <Topbar></Topbar>
      </a-layout-header>
      <a-layout>
        <a-layout-sider style="min-width: 205px;">
          <Menubar v-if="$route.path !== '/'"></Menubar>
        </a-layout-sider>
        <a-layout-content>
          <router-view v-if="isRouterAlive" name="content"></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <!-- </keep-alive> -->
  </div>
</template>
<script>
import Menubar from "./components/common/Menubar";
import Topbar from "./components/common/Topbar";

export default {
  name: "App",
  components: { Menubar, Topbar },
  data() {
    return {
      lTime: new Date().getTime(), // 最后一次点击的时间
      cTime: new Date().getTime(), //当前时间
      tOut: 120 * 60 * 1000, //超时时间120min
      isRouterAlive: true
    };
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  mounted() {
    window.setInterval(this.tTime, 1000);
    this.handldeLogin()
    // 阻止缩放
    // this.$nextTick(() => {
    //   window.addEventListener("resize", () => { // 监听浏览器窗口大小改变
    //     let ratio
    //     ratio = window.outerWidth / window.innerWidth
    //     ratio = Math.round(ratio * 100)
    //     document.body.style.zoom = 100 / Number(ratio);
    //   });
    // });
  },
  methods: {
    async handldeLogin() {

      const address = new URLSearchParams(window.location.href.split('?')[1])
      // 提取查询参数
      const loginType = address.get('login_type');
      const redirectUri = address.get('redirect_uri');
      const clientId = address.get('client_id');

      // 判断 login_type 是否等于 oauth2
      if (loginType === 'oauth2') {
        const params = {
          client_id: clientId,
          redirect_uri: redirectUri,
          response_type: 'code',
        }
        const { data } = await this.$api.systemSettings.getAuthorizeApi(params)
        if (data.flag === 0) {
          window.location.replace(data.redirect);
        }

      } else {
        console.log('login_type is not oauth2');
      }

    },

    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    clicked() {
      this.lTime = new Date().getTime(); //当界面被点击更新点击时间
    },
    tTime() {
      this.cTime = new Date().getTime();
      if ((this.cTime - this.lTime) > this.tOut) {
        if (localStorage.getItem('islogin')) {
          this.countDown()
          localStorage.removeItem('authToken');
          this.$router.push({ path: '/' })
        } else {
          this.lTime = new Date().getTime();
        }
      }
    },
    countDown() {
      this.$success({
        title: '提示',
        content: `登录超时，请重新登录！`,
      });
    },
  }
};
</script>
<style lang="less">
@import './assets/css/wz_blue.less';

:root {
  --themeColor: #006db8;
  --mainRedColor: #cf1b47;
  --mainPurpleColor: #6634b3;
  --mainGreenColor: #059db3;
  --mainYellowColor: #d5aa12;
  --mainOrangeColor: #df8300;
  --mainGreyColor: #f0f3f5;
}

html,
body {
  margin: 0;
  padding: 0;
  bottom: 0;
  left: 0;
  // width: 100%;
  height: 100%;
  background-color: #EAEDEF;
  min-width: 1366px;
  // overflow-x: scroll;
}

#app {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 1366px;
  // height: 100%;
}

#subuser_permissions .ant-select-selection {
  width: 200px !important
}

.tabstyle {
  height: 21em;
}

.bigstyle {
  // height: 35em;
  height: 78vh;
}

.tabsmall {
  height: 16em;
}

.bigtab {
  height: 40em;
}

.block {
  display: block !important;
}

.mytitle {
  color: #333;
  background-color: var(--mainGreyColor);
  height: 3rem;
  line-height: 3rem;
  font-size: 1rem;
  padding-left: 1rem;
  box-shadow: 0px 2px 8px #ccc;
}

.tabs-top {
  // margin-top: 16px;
}

.ant-card-body {
  padding: 14px !important;
}

p {
  margin-bottom: 0.5em !important;
}

.ant-layout-header {
  padding: 0 !important;
  height: 3.5rem !important;
}

.index {
  height: 100%;
  background-color: #f1f6fa;
}

.dcontent {
  line-height: 2em;
  margin: 0 0 0.2rem 0;
}

.uheader {
  // background-color: #e6f4ff;
}

.ubody {
  // background-color: #f1f8ff;
}

.val {
  color: var(--themeColor);
}

.red {
  color: var(--mainRedColor);
}

.green {
  color: var(--mainGreenColor);
}

.grey {
  color: #999999;
}

.mytitle i svg image {
  width: 16px !important;
  height: 16px !important;
}

.ant-menu-item a i svg image,
.ant-menu-submenu-title span i svg image {
  width: 14px !important;
  height: 14px !important;
}

::-webkit-scrollbar {
  width: 10px;
  /* 纵向滚动条*/
  height: 10px;
  /* 横向滚动条 */
  // background-color: #fff;
}

/*定义滚动条轨道 内阴影*/
// ::-webkit-scrollbar-track {
//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
//   background-color: #f0f3f5;
// }

/*定义滑块 内阴影*/
::-webkit-scrollbar-thumb {
  // -webkit-box-shadow: inset inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-color: rgba(145, 150, 180, .3);
}

.ant-table-body {
  margin: 0 !important;
}

// 取消表格的鼠标选中的小手状态
.ant-card-hoverable {
  cursor: auto !important;
}

.ant-btn {
  //操作按钮的内边距
  padding: 0 8px !important;
}

.ant-btn-icon-only {
  width: auto !important;
}

.ant-table-thead>tr>th {
  // background-color: #eff0f4 !important;
  background-color: #f0f3f5 !important;
}

.ant-card-head {
  // 列表card的边距对齐
  padding: 0 1rem !important;
}

.ant-tabs-nav-wrap {
  // tab切换标题字体大小
  font-size: 16px;
}

//可伸缩列的class
.resize-table-th {
  position: relative;
}

.table-draggable-handle {
  position: absolute;
  width: 10px !important;
  height: 100% !important;
  top: 0;
  left: 0;
  cursor: col-resize;
  touch-action: none;
  border: none;
}

//确认框的错误图标颜色
.ant-modal-confirm-confirm .ant-modal-confirm-body>.anticon-close-circle {
  color: var(--mainRedColor) !important;
}

//危险按钮的颜色
.ant-btn-danger:hover,
.ant-btn-danger:focus {
  background-color: var(--mainRedColor) !important;
  border-color: var(--mainRedColor) !important;
}

//树节点选中的背景色
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: transparent !important;
}

//抽屉drawer
.ant-drawer-header,
.ant-drawer-body {
  padding: 15px !important;
}

.ant-drawer-header {
  border-bottom: 1px solid var(--themeColor) !important;
}

// //滑动条的样式
// .ant-slider-tooltip .ant-tooltip-inner {
//   color: #000 ;
//   background-color: transparent;
//   box-shadow: none;
//   -webkit-box-shadow: none;
//   padding: 0 8px;
// }

//状态显示
.green-circle,
.red-circle,
.orange-circle,
.blue-circle,
.grey-circle,
.yellow-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: var(--mainGreenColor);
}

.red-circle {
  background-color: var(--mainRedColor);
}

.orange-circle {
  background-color: var(--mainOrangeColor);
}

.yellow-circle {
  background-color: #FADB14;
}

.blue-circle {
  background-color: var(--themeColor);
}

.grey-circle {
  background-color: #999999;
}

.purple-circle {
  background-color: var(--mainPurpleColor);
}

//选项卡
.ant-card-bordered {
  border: none !important;
}

//Blocked aria-hidden on a <div> element
.ant-modal div[aria-hidden="true"] {
  display: none !important
}
</style>
